import { defineComponent } from "vue";
import { formatNumber } from "/@/utils/formatNumber";

export default defineComponent({
  name: "PubColumn",
  props: {
    data: {
      type: Array,
      default: () => [],
      required: true
    },
    columnKey: {
      type: String,
      required: true
    },
    childKey: {
      type: String,
      default: ""
    },
    isFormat: {
      type: Boolean,
      default: false
    },
    height: {
      type: Number,
      default: 60
    }
  },

  setup(props) {
    return () => (
      <div class="contract-list-container">
        {props.data.map((item, index) => (
          <div
            key={index}
            style={{
              padding: props.childKey ? 0 : "6px",
              height: props.height * (item.maxNumber || 1) + "px"
            }}
            class={[
              "contract-list",
              index === props.data.length - 1 ? "no-border" : ""
            ]
              .flat()
              .join(" ")}>
            {!props.childKey ? (
              props.isFormat ? (
                formatNumber(item[props.columnKey] || 0)
              ) : props.columnKey || item[props.columnKey] == 0 ? (
                item[props.columnKey]
              ) : (
                "-"
              )
            ) : item[props.childKey].length ? (
              item[props.childKey].map((i, j) => (
                <div
                  style={{ height: props.height + "px", padding: "-6px" }}
                  class={[
                    "contract-list",
                    j === item[props.childKey].length - 1 ? "no-border" : ""
                  ]
                    .flat()
                    .join(" ")}>
                  {props.isFormat
                    ? formatNumber(i[props.columnKey] || 0)
                    : i[props.columnKey] || "-"}
                </div>
              ))
            ) : (
              <div style={{ height: props.height + "px", padding: "6px" }}>
                -
              </div>
            )}
          </div>
        ))}
      </div>
    );
  }
});
